// react入口 =》vue入口main.js
import React from 'react'
import ReactDOM from 'react-dom'
// 全局样式
import './index.css'

// 使用jsx创建ul
/**
 * React.createElement('html元素名', {属性名1:属性名1值, 属性名2:属性名2值,...}, 子元素1, 子元素2...)
 * jsx使用注意事项：
 * + JSX必须要有一个根节点， 如果没有根节点，可以使用`<></>`（幽灵节点）或者`<React.Fragment></React.Fragment>`
   + 所有标签必须结束，如果是单标签可以使用`/>`结束
   + JSX中语法更接近与JavaScript，**属性名采用驼峰命名法**
   + `class` ===> `className`
   + `for` ===>  `htmlFor`
   + JSX可以换行，如果JSX有多行，推荐使用`()`包裹JSX，防止 JS 自动插入分号的 bug
 */

const ul = (
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
)
const div = (
  <>
    <div className="test">
      <h1>hi jsx</h1>
    </div>
    <p>
      <label htmlFor="ck">选择</label>
      <input type="checkbox" name="" id="ck" />
    </p>
    <h2>2</h2>
  </>
)
ReactDOM.render([ul, div], document.getElementById('root'))
